<template>
  <zm-view ref="view" background="#a582f7" @load-paging="handleLoadWinLog" @refresh-paging="handleRefreshWinLog">
    <zm-navbar back-icon-color="#fff" :border-bottom="false" background="transparent" immersive> </zm-navbar>
    <view class="header-section">
      <image class="section-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/prize-record-bg.png')" mode="scaleToFill" />
      <view class="integral-text">好礼送不停</view>
    </view>
    <view class="list-section">
      <zm-empty v-if="list.length == 0" text="暂无奖品~"></zm-empty>
      <view v-for="(item, index) in list" :key="index" class="item-wrap">
        <view class="flex flex-col flex-1">
          <text class="font-34 text-row-1">{{ prizeName(item) }}</text>
          <text class="text-999">{{ item.createTime }}</text>
        </view>
        <text class="font-34">已获得</text>
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      list: [],
      drawRule: {}
    }
  },
  computed: {
    prizeName() {
      return (item) => {
        if (item.awardType == "integral") {
          return item.iRaise + "积分"
        }
        return item.couponName
      }
    }
  },
  onLoad() {},
  methods: {
    async handleLoadWinLog(paging, next) {
      const res = await uni.$api.integral.getWinLog(paging)
      this.list = [...this.list, ...res.list]
      next({ list: this.list, total: res.count })
    },
    async handleRefreshWinLog(paging, next) {
      const res = await uni.$api.integral.getWinLog(paging)
      this.list = res.list
      next({ list: this.list, total: res.count })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-section {
  width: 100%;
  height: 2100rpx;
  .section-bg {
    width: 100%;
    height: 100%;
  }
  .integral-text {
    top: 380rpx;
    left: 50%;
    color: #563cbb;
    font-size: 36rpx;
    position: absolute;
    transform: translateX(-50%);
  }
}
.list-section {
  z-index: 10;
  margin: 0 24rpx;
  padding: 0 24rpx;
  position: relative;
  margin-top: -930rpx;
  border-radius: 30rpx;
  margin-bottom: 100rpx;
  background: linear-gradient(0deg, #f7f8f0 0%, #f8ebf9 100%);
  .item-wrap {
    display: flex;
    padding: 30rpx 24rpx;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
